<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
  import { echarts, ECOption, graphicColors, colors } from '@/hooks/core/useECharts';
  import { IDataShow } from '@/api/types';
  import { isDark } from '@/hooks/core/useToggleDark';
  import { useAppSettingStore } from '@/store/module/useAppSettingStore';
  import { useMobile } from '@/hooks/core/useMobile';

  const props = withDefaults(defineProps<{ showData: IDataShow[] }>(), {
    //@ts-ignore
    showData: [
      {
        xAxis: [],
        disData: [120, 282, 111, 234, 220, 340, 310],
        disName: '新型冠状病毒肺炎',
        type: 'line',
      },
    ] as IDataShow[],
  });
  let chartInstance: Recordable;
  const displayLineStack_ref = ref<HTMLElement>(null!);
  const colorArr1 = [
    'rgba(11, 168, 44, 0.5)',
    'rgba(44, 110, 255, 0.5)',
    'rgba(22, 242, 217, 0.5)',
    'rgba(254, 33, 30, 0.5)',
    'rgba(250, 105, 0, 0.5)',
  ];
  // 全透明的颜色值
  const colorArr2 = [
    'rgba(11, 168, 44, 0)',
    'rgba(44, 110, 255, 0)',
    'rgba(22, 242, 217, 0)',
    'rgba(254, 33, 30, 0)',
    'rgba(250, 105, 0, 0)',
  ];
  let ranInt = 0;
  const initChart = () => {
    try {
      chartInstance = echarts.init(displayLineStack_ref.value);
    } catch (e) {}
    // 对图表初始化配置的控制
    const initOption = {
      color: colors,
      title: {
        left: 'center',
        bottom: 10,
        textStyle: {
          color: '#fff',
          textBorderColor: 'black',
          textBorderWidth: 1,
        },
      },
      legend: {
        itemGap: 5,
        itemWidth: 20,
        itemHeight: 10,
        top: '5%',
        left: 'center',
        textStyle: {
          color: '#fff',
        },
      },
      grid: {
        top: '10%',
        left: '5%',
        right: '6%',
        bottom: '20%',
        containLabel: true, // 距离是包含坐标轴上的文字
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: '#fff',
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
      },
      yAxis: {
        type: 'value',
        name: '单位（人次）',
        nameLocation: 'start',
        nameTextStyle: {
          color: '#fff',
          fontStyle: 'oblique',
          align: 'right',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
          },
          symbol: ['none', 'arrow'],
        },
        axisLabel: {
          color: '#fff',
          margin: 12,
        },
        splitLine: {
          show: false,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          show: true,
          type: 'cross',
        },
      },
      series: [
        {
          name: '风疹',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)',
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)',
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
        },
        {
          name: '手足口病',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(0, 221, 255)',
              },
              {
                offset: 1,
                color: 'rgb(77, 119, 255)',
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
        },
        {
          name: '流行性感冒',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(55, 162, 255)',
              },
              {
                offset: 1,
                color: 'rgb(116, 21, 219)',
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
        },
        {
          name: '流行性腮腺炎',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 0, 135)',
              },
              {
                offset: 1,
                color: 'rgb(135, 0, 157)',
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
        },
        {
          name: '感染性腹泻病',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 191, 0)',
              },
              {
                offset: 1,
                color: 'rgb(224, 62, 76)',
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
        },
      ],
    };
    chartInstance.setOption(initOption);
  };
  const screenAdapter = () => {
    const titleFontSize = (displayLineStack_ref.value.offsetWidth / 100) * 3;
    // 和分辨率大小相关的配置项
    const adapterOption = {
      title: {
        textStyle: {
          fontSize: titleFontSize,
        },
      },
      yAxis: {
        nameTextStyle: {
          fontSize: titleFontSize * 0.7,
        },
      },
    };
    chartInstance.setOption(adapterOption);
    // 手动的调用图表对象的resize 才能产生效果
    chartInstance.resize();
  };
  const destroyed = () => {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener('resize', screenAdapter);
  };
  const updateECharts = () => {
    const dataOption = {
      title: {
        text: '▎' + '丙类传染病前五种疾病',
      },
      xAxis: {
        data: props.showData[0].xAxis,
      },
      series: [
        {
          name: '风疹',
          data: props.showData[0].disData,
        },
        {
          name: '手足口病',
          data: props.showData[1].disData,
        },
        {
          name: '流行性感冒',
          data: props.showData[2].disData,
        },
        {
          name: '流行性腮腺炎',
          data: props.showData[3].disData,
        },
        {
          name: '感染性腹泻病',
          data: props.showData[4].disData,
        },
      ],
    };
    chartInstance.setOption(dataOption);
  };
  const isMobile = useMobile();
  watch(isMobile, (value) => {});
  watch(isDark, (value) => {
    chartInstance.setOption({});
  });
  onMounted(() => {
    initChart();
    window.addEventListener('resize', screenAdapter);
    // 在页面加载完成的时候, 主动进行屏幕的适配
    screenAdapter();
    updateECharts();
  });
  onUnmounted(() => {
    destroyed();
  });
</script>

<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="enter-y" ref="displayLineStack_ref"></div>
</template>

<style lang="scss"></style>
